<template>
  <music-list :title="title" :bgImg="bgImg" :songs="songs" :rank="true"></music-list>
</template>

<script>
  import MusicList from '../music-list/music-list.vue';
  import {mapGetters} from 'vuex';
  import {getTopListSongs} from 'api/rank.js';
  import {ERR_OK} from 'api/config.js';
  import {createSong} from 'common/js/song.js';

  export default {
    components: {MusicList},
    data () {
      return {
        songs: []
      };
    },
    computed: {
      title () {
        return this.topList.topTitle;
      },
      bgImg () {
        if (this.songs.length) {
          return this.songs[0].image;
        }
        return '';
      },
      ...mapGetters([
        'topList'
      ])
    },
    methods: {
      _getSongs () {
        getTopListSongs(this.topList.id).then(res => {
//          console.log(res);
          if (res.code === ERR_OK) {
            this.songs = this._normalSongList(res.songlist);
          }
        }).catch(() => {
          console.log('获取排行榜歌曲异常');
        });
      },
      _normalSongList (list) {
        let songs = [];
        list.forEach(item => {
          const musicData = item.data;
          if (musicData.songid && musicData.albummid) {
            songs.push(createSong(musicData));
          }
        });
        return songs;
      }
    },
    created () {
      this._getSongs();
    }
  };
</script>

<style>

</style>
